<template>
  <div class="user_right fl ml20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="更改" name="first">
        <div class="bindTitle">绑定手机</div>
        <div class="acount_bind bd1 mt30 relative line36">
            <dl class="com_form ">
                <dd class="clearfix"><b><i>*</i>手机号码：</b>
                    <p>
                      <input type="text" name="login_name" v-model="params.phone" @input="setPhone($event.target.value)" class="w280 txt">
                      <span id="ContentPlaceHolder1_txtPhone_Note" show=""><i style="display:none"></i></span>
                    </p>
                </dd>
                <dd class="clearfix"><b><i>*</i>短信校验码：</b>
                    <p>
                      <input input v-model="params.verification_code" placeholder="请输入您收到的验证码" type="text" id="txtCode" @click="getPhoneCode">
                      <!-- <i data="60">60</i>s后重新获取</a> -->
                      <!-- <span id="ContentPlaceHolder1_txtCode_Note" show=""><i style="display:none"></i></span> -->
                    </p>
                    <!-- <div v-if="!$v.params.verification_code.required" class="input-pt input-pt-w">
                      <span>验证码不能为空</span>
                      <i class="ico">&nbsp;</i>
                    </div> -->
                </dd>
                <dt>
                    <a href="javascript:;" class="sbt bg4448f8" id="btnSubmit">更改绑定</a>
                </dt>
            </dl>
        </div>
        <div id="qrcode" style="margin: 22px 0px !important;">
            <div class="bindTitle">绑定微信</div>
            <iframe
                src="https://open.weixin.qq.com/connect/qrconnect?appid=wx3bf155d4076317bd&amp;scope=snsapi_login&amp;redirect_uri=https%3A%2F%2Fwww.zydmall.com%2Fuser%2Fwechat%2FwxBind.aspx%3Fflag%3DsetWet%26userId%3D73200&amp;state=123&amp;login_type=jssdk&amp;self_redirect=true&amp;styletype=&amp;sizetype=&amp;bgcolor=&amp;rst=&amp;href=https://zydmall-files.oss-cn-shenzhen.aliyuncs.com/zyd-mall-static/css/wetCode2.css"
                frameborder="0"
                scrolling="no"
                width="300px"
                height="400px"
            ></iframe>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { resetPwd, phoneCode } from '@/api/user'
import { required } from 'vuelidate/lib/validators'
import { regex } from 'vuelidate/lib/validators/common'
const phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/) // 手机号码校验
export default {
  name: 'rt-changeBind',
  metaInfo: {
    title: '更改绑定',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      activeName: 'first',
      hasMod: true,
      params: {
        phone: '',
        password: '',
        verification_key: '',
        verification_code: '123456'
      }
    }
  },
  validations: {
    params: {
      phone: {
        required,
        phone
      },
      verification_code: {
        required
      }
    }
  },
  mounted () {
    // getPhoneCode()
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async resetPwds () {
      const res = await resetPwd(this.params)
      if (res.meta) {
        console.log('reseetPwd.res', res)
      }
    },
    async getPhoneCode () {
      const res = await phoneCode({ phone: this.params.phone })
      console.log(res)
      if (res.key) {
        this.params.verification_key = res.key
      }
    },
    setPhone (value) {
      this.params.phone = value
      this.$v.params.phone.$touch()
    }
  }
}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
          padding: 0 38px;
          height: 40px;
          box-sizing: border-box;
          line-height: 40px;
          display: inline-block;
          list-style: none;
          font-weight: 500;
          color: #4448f8;
          position: relative;
          font-size: 18px;
      }
      .el-tabs__item:hover {
          color: #4448f8;
      }
      .el-tabs__active-bar {
          height: 3px;
          background-color: #4448f8;
          width: 110px !important;
          transform: translateX(25px) !important;
      }
    }
    .el-tabs__content {
      color: #333;
      margin-top: 30px;
      .bindTitle {
      border-left: 3px solid #4448f8;
      box-sizing: border-box;
      width: 88px;
      height: 27px;
      line-height: 27px;
      background: #fcfcfa;
      text-align: center;
      margin-top: 17px;
      margin-bottom: -12px;
      }
      .acount_bind {
          .com_form {
              padding: 23px 0 10px!important;
              color: #333;
              dd {
                  margin-bottom: 20px;
                  line-height: 36px;
              }
              b {
                  float: left;
                  width: 140px;
                  text-align: right;
                  i {
                      color: #ff0000;
                      margin-right: 5px;
                  }
              }
              p {
                  float: left;
                  position: relative;
                  top: 0px;
                  left: 0px;
                  height: 34px;
                  line-height: 34px;
                  text-indent: 5px;
                  input {
                      border: 1px solid #e6e6e6;
                      height: 34px;
                      line-height: 34px;
                      text-indent: 5px;
                  }
                  .note_false {
                      color: red;
                      background-position: 0 -771px;
                  }
                  .note_true, .note_false, .note_com {
                      border: none;
                      background: url('../../../assets/img/val.png') 0 0 no-repeat;
                      display: inline-block;
                      position: absolute;
                      left: 0;
                      bottom: -20px;
                      padding: 0 0 0 20px;
                      font-size: 14px;
                      height: 16px;
                      line-height: 16px;
                  }
              }
              .w280 {
                  width: 280px;
              }
          }
      }
      .relative {
          position: relative;
      }
      #qrcode iframe {
          width: 100%;
      }
      .sbt, .com_form dt .sbt2, .com_form dt a {
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        display: inline-block;
        margin-top: 25px;
        margin-right: 20px;
        border: 0;
      }
      a.bg4448f8, input.bg4448f8 {
          background: #4448f8;
          color: #fff;
      }
      dt {
        padding-left: 140px;
      }
      a.bg4448f8:hover, input.bg4448f8:hover {
        background: #0d9b9d;
      }
    }
  }
}
.c999 {
  color: #999;
}
.ml30 {
  margin-left: 30px;
}

.line36 {
  line-height: 36px;
}
.bd1 {
  border: 1px solid #e6e6e6;
}
.mt30 {
  margin-top: 30px;
}
.c333 {
  color: #333;
}
.fl {
  float: left;
  display: inline;
}
.c999 {
  color: #999;
}
.f14 {
  font-size: 14px;
}
.mt10 {
  margin-top: 10px;
}
.c333 {
  color: #333;
}
.f18 {
  font-size: 18px;
}
.mr20 {
  margin-right: 20px;
}
.bgff0000 {
    background: #ff0000;
    color: #fff;
}
.line36 {
    line-height: 36px;
}
.bgff0000 {
    background: #ff0000;
    color: #fff;
}
.dl {
    display: inline-block;
}
.w120 {
    width: 120px;
}
.mr10 {
    margin-right: 10px;
}
.h36 {
    height: 36px;
    line-height: 36px;
}
.vmid {
    vertical-align: middle;
}
.center {
    text-align: center;
}
a.bgff0000:hover {
    background: #dc4c4c;
}
</style>
